<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 14:11:32
 * @Description: 
-->


<template>
    <view class="box">
        <view v-for="item in 8" :key="item" class="item" :style="{width: Math.floor(100/column)-1+'%'}">
            <image :style="{height:column==2 ? '328rpx' : '216rpx'}" src="/static/temporary/img3.jpg" alt=""></image>
            <view class="text" :style="{background:textBgColor}">
                <text class="u-line-2" style="line-height:36rpx">
                    宝可梦集换式卡牌游戏宝可梦集换式卡牌游戏
                </text>
                <view class="com-m-t-20 com-price-color">
                    <text class="com-font-32 com-font-bold">1660</text>
                    <text class="com-font-28">日元</text>
                </view>
            </view>
        </view>
        <!-- 占位 -->
        <view :style="{width: Math.floor(100/column)-1+'%'}"></view>
    </view>
</template>


<script>
export default {
    name: "listN",
    components: {},
    props: {
        column: { type:Number, default: 3 },
        textBgColor: { type:String, default: "#fff" }
    },

    data() {
        return {};
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {}
};
</script>


<style scoped lang='scss'>
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item{
        margin-top: 20rpx;
        border-radius: 24rpx;
        overflow: hidden;
        image{
            // width: 215rpx;
            width: 100%;
            height: 200rpx;
        }
        .text{
            // width: 215rpx;
            width: 100%;
            padding: 24rpx 20rpx;
        }
    }
</style>